<template>
    <span>
        <span class="cover" v-show="!isLoading">
            <span class="content">
                <slot></slot>
            </span>
        </span>
    </span>
</template>

<script>
export default {
    name: "maskView",
    computed: {
        isLoading() {
            return this.$store.state.isLoading;
        }
    },
    methods: {
        stop() {
            var mo = function(e) {
                e.preventDefault();
            };
            document.body.style.overflow = "hidden";
            document.addEventListener("touchmove", mo, false);
        },
        move() {
            var mo = function(e) {
                e.preventDefault();
            };
            document.body.style.overflow = "";
            document.removeEventListener("touchmove", mo, false);
        }
    },
    mounted() {
        //this.stop();
    },
    beforeDestroy() {
        //this.move();
    }
};
</script>

<style scoped>
.cover {
    position: fixed;
    z-index: 1080;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    padding: 0;
    margin: 0;
    background: rgba(0, 0, 0, 0.5);
    touch-action: none;
}
.content {
    position: absolute;
    width: auto;
    height: auto;
    min-width: 20em;
    max-width: 60em;
    z-index: 1081;
    background: #fff;
    border: #aaa 1px solid;
    border-radius: 1em;
    box-shadow: 0 0.5em 2em rgba(0, 0, 0, 0.5);
    padding: 2em;
    touch-action: none;
    top: 50%;
    left: 50%;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
}
</style>